<template>
  <div class="liveUnderwayBox">
    <x-header :left-options="{showBack: true,backText:'麦月小苍尔作文'}" class="headerBox"></x-header>
    <!-- 直播 -->
    <div class="navLive">
      <img src="../assets/images/Courseinfo01.png" />
      <div class="navLive_stop">
        <div>第二章：1.如何做出更好的作文题目？</div>
        <div class="navLive_stop_btn">
          <img src="../assets/images/icon01.png" />
          <div>正在直播</div>
        </div>
        <div class="liveTime">2019-2-26 10:00-12:00</div>
      </div>
    </div>
    <!-- tab导航 -->
    <div class="navTabList">
      <tab
        :line-width="3"
        custom-bar-width="20px"
        active-color="#000"
        bar-active-color="#1F7AFF"
        v-model="tabIndex"
      >
        <tab-item
          class="vux-center"
          v-for="(item, index) in listContent"
          :key="index"
        >{{item.title}}</tab-item>
      </tab>
    </div>
    <!-- 内容 -->
    <swiper
      v-model="tabIndex"
      :show-dots="false"
      ref="cateSwiper"
      :min-moving-distance="100"
      @on-get-height="getPageHeight"
    >
      <swiper-item v-for="(item, index) in listContent" :key="index">
        <!-- 目录 -->
        <div v-if="item.title == '目录'" class="catalogBox">
          <group v-for="(chapter,index2) in item.chapters" :key="index2">
            <cell
              :title="chapter.zhang"
              is-link
              :border-intent="true"
              :arrow-direction="chapter.showContent ? 'up' : 'down'"
              @click.native="chapter.showContent = !chapter.showContent"
            ></cell>
            <p class="slide" :class="chapter.showContent?'animate':''">
              <router-link to="/" class="jie" v-for="(jie, index3) in chapter.jies" :key="index3">
                <img :src="jie.src" class="jieIcon" />
                <div class="jieInfo">
                  <div>
                    <p>{{jie.jieName}}</p>
                    <p v-if="jie.status=='直播中'" class="jyLive flex">
                      <img src="../assets/images/live.png" alt />
                      <span>正在直播 {{jie.date}}</span>
                    </p>
                    <p v-if="jie.status=='未开播'" class="jyDate">未开播 直播课：{{jie.date}}</p>
                    <p v-if="jie.status=='回放'" class="jyPlayback flex">
                      直播已结束
                      <span>可查看回放</span>
                      <img src="../assets/images/playback.png" alt />
                    </p>
                  </div>
                </div>
              </router-link>
            </p>
          </group>
        </div>
        <!-- 介绍 -->
        <div v-if="item.title == '介绍'" class="briefBox">
          <!-- 推荐课程 -->
          <div class="briefCourse">
            <div>推荐课程</div>
            <p>&emsp;&emsp;诸葛建军是著名教育专家，教学风格幽默风趣，所授的课程深受广大学生喜爱</p>
          </div>
          <!-- 授课教师 -->
          <div class="briefTeacher">
            <div>授课教师</div>
            <div class="briefTeacher_list">
              <img src="../assets/images/Courseinfo05.png" />
              <div class="briefTeacher_list_con">
                <div>诸葛建军</div>
                <div>
                  简介
                  <span>：著名语文教育专家，内蒙古一机集团第一中学首批高级教师，教授，全国著名语文教师,语言文字专家，文稿编纂。</span>
                </div>
              </div>
            </div>
            <div class="briefTeacher_list">
              <img src="../assets/images/teacher01.png" />
              <div class="briefTeacher_list_con">
                <div>李佳慧</div>
                <div>
                  简介
                  <span>：著名语文教育专家，内蒙古一机集团第一中学首批高级教师，教授，全国著名语文教师。</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 授课机构 -->
          <div class="briefOrg">
            <div>授课机构</div>
            <div class="briefOrg_logo">
              <img src="../assets/images/logo.png" />
              <div>状元云在线</div>
            </div>
          </div>
          <!-- 课程详情 -->
          <div class="briefInfo">
            <div>课程详情</div>
            <div>
              <span
                decode
              >&emsp;&emsp;麦月小苍耳作文课程，是一门博大精深的学科，需要有学习兴趣，好的学习习惯等都是很重要的。学好语文课程，要足以培养学习兴趣，养成好的学习习惯，积累学习方法，增强学习能力等。该课程的基本特点，是人文性与工具性的统一，有一定的审美性与实用性。</span>
            </div>
          </div>
          <!-- 试用人群 -->
          <div class="briefPeople">
            <div>试用人群</div>
            <div class="briefPeople_grade">
              <div></div>
              <div>语文作文水平想要提高的人</div>
            </div>
            <div class="briefPeople_grade">
              <div></div>
              <div>四年级</div>
            </div>
          </div>
          <!-- 课程目标 -->
          <div class="briefGoal">
            <div>课程目标</div>
            <div>语文作文水平直线提升</div>
          </div>
        </div>
        <!-- 同学 -->
        <div v-if="item.title == '同学'" class="userBox">
          <div  class="userInfo">
            <div class="userInfoLeft">
              <img src="../assets/images/head123.png" />
              <div class>
                <div class="userTitle">罗晓飞</div>
                <div class="studyNum">总共学习2次</div>
              </div>
            </div>
            <div class="ranking">36名</div>
          </div>
          <div v-for="(val,num) in item.chapters" :key="num" class="classmates">
            <div class="classmate">
              <div class="classmateLeft">
                <div>
                  <img v-if="val.rank==1" src="../assets/images/top01.png" />
                  <img v-if="val.rank==2" src="../assets/images/top02.png" />
                  <img v-if="val.rank==3" src="../assets/images/top03.png" />
                  <span v-if="val.rank>=4">{{val.rank}}</span>
                </div>
                <img src="../assets/images/head123.png" />
                <span>{{val.userName}}</span>
              </div>
              <div class="studyNum">总共学习{{val.studyNum}}次</div>
            </div>
          </div>
        </div>
      </swiper-item>
    </swiper>
  </div>
</template>

<script>
import { XHeader, Group, Cell, Tab, TabItem, Swiper, SwiperItem } from "vux";
export default {
  components: {
    XHeader,
    Group,
    Cell,
    Tab,
    TabItem,
    Swiper,
    SwiperItem
  },
  data() {
    return {
      denominator: "20",
      numerator: "15",
      percent: 75,
      students: [
        {
          src: require("../assets/images/head02.png")
        },
        {
          src: require("../assets/images/head02.png")
        },
        {
          src: require("../assets/images/head02.png")
        }
      ],
      tabIndex: 0,
      // tab
      listContent: [
        {
          title: '目录',
          chapters: [
            {
              showContent: false,
              zhang: '作文第一章',
              jies: [
                {
                  status: '直播中',
                  src: require('../assets/images/playback01.png'),
                  jieName: '1.如何写出更好的文章',
                  date: '2018-12-01',
                },
                {
                  status: '未开播',
                  src: require('../assets/images/playback01.png'),
                  jieName: '2.如何写出更好的文章',
                  date: '2018-12-01',
                },
                {
                  status: '回放',
                  src: require('../assets/images/playback01.png'),
                  jieName: '3.如何写出更好的文章',
                  date: '2018-12-01',
                }
              ]
            },
            {
              showContent: false,
              zhang: '作文第二章',
              jies: [
                {
                  status: '直播中',
                  src: require('../assets/images/playback01.png'),
                  jieName: '1.如何写出更好的文章',
                  date: '2018-12-01',
                },
                {
                  status: '未开播',
                  src: require('../assets/images/playback01.png'),
                  jieName: '2.如何写出更好的文章',
                  date: '2018-12-01',
                },
                {
                  status: '回放',
                  src: require('../assets/images/playback01.png'),
                  jieName: '3.如何写出更好的文章',
                  date: '2018-12-01',
                }
              ]
            },
            {
              showContent: false,
              zhang: '作文第三章',
              jies: [
                {
                  status: '回放',
                  src: require('../assets/images/playback01.png'),
                  jieName: '3.如何写出更好的文章',
                  date: '2018-12-01',
                }
              ]
            }
          ]
        },
        {
          title: '介绍',
          chapters: [
            {

            }
          ]
        },
        {
          title: '同学',
          chapters: [
            {
              userImg: require("../assets/images/head123.png"),
              userName: '美娜',
              rank: 1,
              studyNum: '86',
            },
            {
              userImg: require("../assets/images/head123.png"),
              userName: '美娜',
              rank: 2,
              studyNum: '86',
            },
            {
              userImg: require("../assets/images/head123.png"),
              userName: '美娜',
              rank: 3,
              studyNum: '86',
            },
            {
              userImg: require("../assets/images/head123.png"),
              userName: '美娜',
              rank: 4,
              studyNum: '86',
            },
          ]
        },
      ]
    };
  },
  methods: {
    getPageHeight() {
      let topHeight = document.getElementsByClassName('vux-slider')[0].offsetTop,
        diffHeight = window.screen.height - 44;
      this.$nextTick(() => {
        this.$refs.cateSwiper.xheight = diffHeight + 'px'
      })
      // console.log(topHeight, diffHeight, this.$refs.cateSwiper.xheight)
    },
  }
};
</script>

<style lang="less" scoped>
.liveUnderwayBox {
  // 头部导航
  /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
  }
  // 直播
  .navLive {
    width: 100%;
    height: 428px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .navLive_stop {
      background: rgba(0, 0, 0, 0.5);
      width: 100%;
      height: 100%;
      color: #fff;
      font-size: 32px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      div:nth-child(1) {
        margin-top: 100px;
      }
      .navLive_stop_btn {
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px 20px;
        border-radius: 40px;
        border: 2px solid #fff;
        background: -webkit-linear-gradient(
          left,
          #e63a83,
          #fc3958
        ); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(
          right,
          #e63a83,
          #fc3958
        ); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(
          right,
          #e63a83,
          #fc3958
        ); /* Firefox 3.6 - 15 */
        background: linear-gradient(
          to right,
          #e63a83,
          #fc3958
        ); /* 标准的语法 */
        img {
          width: 30px;
          height: 30px;
          margin: 0 20px;
        }
      }
      .liveTime {
        margin-top: 20px;
      }
    }
  }
  // 简介样式
  .briefBox {
    /* 简介页面 */
    .briefCourse {
      padding: 20px 26px;
      border-bottom: 20px solid #f8f9fa;
      div {
        font-size: 32px;
      }
      p {
        font-size: 26px;
        color: #8e8e8c;
        margin-top: 20px;
      }
    }
    .briefTeacher {
      padding: 20px 26px;
      border-bottom: 20px solid #f8f9fa;
      div:nth-child(1) {
        font: 600 35px '微软雅黑';
      }
      .briefTeacher_list {
        margin: 20px 0;
        display: flex;
        align-items: center;
        img {
          width: 126px;
          height: 126px;
          margin-right: 20px;
          flex-shrink: 0;
        }
        .briefTeacher_list_con {
          div:nth-child(1) {
            font: 600 32px '微软雅黑';
          }
          div:nth-child(2) {
            margin-top: 10px;
            font-size: 24px;
          }
          div:nth-child(2) text {
            color: #8e8e8c;
          }
        }
      }
    }
    // 授课机构
    .briefOrg {
      padding: 20px 26px;
      border-bottom: 20px solid #f8f9fa;
      div:nth-child(1) {
        font: 600 35px '微软雅黑';
      }
      .briefOrg_logo {
        margin-top: 20px;
        display: flex;
        align-items: center;
        img {
          width: 65px;
          height: 36px;
          margin-right: 30px;
        }
        div {
          color: #979795;
          font-size: 28px;
        }
      }
    }
    // 课程详情
    .briefInfo {
      padding: 20px 26px;
      border-bottom: 20px solid #f8f9fa;
      div:nth-child(1) {
        font: 600 35px '微软雅黑';
      }
      div:nth-child(2) {
        font-size: 24px;
        color: #8e8e8c;
        margin-top: 20px;
        line-height: 35px;
      }
    }
    // 适用人群
    .briefPeople {
      padding: 20px 26px;
      border-bottom: 20px solid #f8f9fa;
      div:nth-child(1) {
        font: 600 35px '微软雅黑';
      }
      .briefPeople_grade {
        margin: 10px 0;
        display: flex;
        align-items: center;
        div:nth-child(1) {
          width: 10px;
          height: 10px;
          background-color: #6d6d6d;
          border-radius: 50%;
          margin: 0 20px;
        }
        div:nth-child(2) {
          color: #8e8e8c;
          font-size: 32px;
        }
      }
    }

    .briefGoal {
      padding: 20px 26px;
      border-bottom: 20px solid #f8f9fa;
      div:nth-child(1) {
        font: 600 35px '微软雅黑';
      }
      div:nth-child(2) {
        color: #8e8e8c;
        font-size: 32px;
        margin: 20px 0;
      }
    }
  }
  /* 同学 */
  .userBox {
    .userInfo {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30px;
      background: #fff;
      border-bottom: 20px solid #f8f9fa;
      .userInfoLeft {
        display: flex;
        align-items: center;
        img {
          width: 90px;
          height: 90px;
          margin-right: 20px;
        }
        .userTitle {
          font-size: 30px;
        }
        .studyNum {
          color: #999;
        }
      }
      .ranking {
        font-size: 30px;
      }
    }

    .classmates {
      margin-top: 20px;
      background: #fff;
      padding: 0 30px;
      .classmate {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;
        border-bottom: 1px solid #eee;
      }
      .classmateLeft {
        display: flex;
        align-items: center;
        font-size: 30px;
      }
      .classmateLeft div:first-child img {
        width: 44px;
        height: 57px;
      }
      .classmateLeft div:first-child {
        width: 100px;
        text-align: center;
      }
      .classmateLeft img:nth-child(2) {
        width: 90px;
        height: 90px;
        margin-right: 30px;
      }
      .studyNum {
        font-size: 24px;
        color: #999;
      }
    }
  }

  // tab导航
  .navTabList {
    /deep/.vux-tab-selected {
      font-size: 32px;
      font-weight: 600;
    }
  }
  .vux-slider {
    // tab内容板块
    /deep/.vux-swiper {
      overflow-y: auto;
      // 目录样式
      .catalogBox {
        /deep/.weui-cells {
          margin-top: 0;
          /deep/.weui-cell {
            font-size: 32px;
          }
          .slide {
            padding: 0 40px;
            overflow: hidden;
            max-height: 0;
            transition: max-height 0.5s cubic-bezier(0, 1, 0, 1) -0.1s;
            background-color: #f8f9fa;
            .jie {
              color: currentColor;
              color: #616161;
              font-size: 30px;
              padding: 20px 0;
              display: flex;
              border-top: 1px solid #f0efee;
              .jieIcon {
                width: 42px;
                height: 42px;
                margin-right: 20px;
                vertical-align: middle;
              }
              .jieInfo {
                flex: 1 1 auto;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .jyLive {
                  font-size: 24px;
                  color: #e63a83;
                  img {
                    width: 26px;
                    margin-right: 10px;
                  }
                }
                .jyPlayback {
                  font-size: 24px;
                  color: #a1a1a1;
                  img {
                    margin-top: 6px;
                    width: 26px;
                  }
                  span {
                    color: #33a3e6;
                    margin: 0 10px;
                  }
                }
                .jyDate {
                  color: #a1a1a1;
                  margin-top: 10px;
                  font-size: 24px;
                }
                .jieState {
                  width: 42px;
                  height: 42px;
                }
              }
            }
          }
          .animate {
            max-height: 9999px;
            transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
            transition-delay: 0s;
          }
        }
        /deep/.weui-cells:before {
          border-top: 0;
        }
      }
    }
  }
}
</style>